<template>
	<view class="daifahuopage">
		<view class="top">
			<image src='../../static/businessImg/whiteback.png' class="topback" @click="back">
			</image>
			<view class="topname">
				{{computedTitle}}
			</view>
		</view>

		<view class="listTabs" v-if="ordertype == 5">
			<view class="listTabs1" :class="currentIndex == 1 ? 'underline' : ''" @click="changeIndex(1)">
				待处理
			</view>
			<view class="listTabs1" :class="currentIndex == 2 ? 'underline' : ''" @click="changeIndex(2)">
				已处理
			</view>
		</view>

		<view class="orderlistitem" v-for="items in data" :key="items.id">
			<view class="orderlistitem1">
				<image :src="items.image" class="orderlistitem12"></image>
				<view class="orderlistitem2">
					{{items.name}}
				</view>
				<view class="orderlistitem3">
					{{items.specifications}} x{{items.num}}
				</view>

				<view class="orderlistitem4">
					
				</view>
			</view>

			<view class="price">
				实付款 ¥{{items.price}}
			</view>

			<view class="itemslast">
				<view class="laststatus">
					{{items.status == 0 ? '待支付' : items.status == 1 ? '待发货' : items.status == 2 ? '待收货' : items.status
					== 3 ? '已收货' : items.status == 4 ? '已评价' : items.status == 5 ? '申请退款' : items.status == 6 ? '退款成功' :
					'待发货'}}
				</view>

				<view class="btn1" @click="handleGoDetail(items)">
					{{ordertype == 5 ? (currentIndex == 1 ? '去处理' : '已完成') : '查看详情'}}
				</view>
			</view>
		</view>
	</view>
</template>

<script>
import {
	storeOrderList
} from '@/api/storeAdmin.js'

import storage from '@/utils/storage.js';
export default {
	data() {
		return {
			data: [],
			id: 1,
			prolist: [{
				id: 1,
				name: '产品名称产品名称产品名称产品名称产品名称产品名称产品名称',
				sku: '30*42cm横竖尺寸',
				num: 1,
				img: require("@/icon.png")
			}],
			price: '2055',


			ordertype: 1,
			currentIndex: 1,
			page: 1,
			limit: 10

		}
	},

	onLoad(option) {
		this.ordertype = option.type;
		this.initData();
	},

	onReachBottom() {
		this.page = this.page + 1
		this.initData()
	},


	mounted() {

	},
	computed: {
		computedTitle() {
			if (this.ordertype == 2) return '已发货订单'
			if (this.ordertype == 3) return '已完成订单'
			if (this.ordertype == 1) return '待发货订单'
			if (this.ordertype == 5) return '售后订单'

		}
	},
	methods: {
		back() {
			// uni.navigateTo({
			// 	url: '/pages/business/index?current=1'
			// });
			uni.navigateBack()
		},

		initData() {

			storeOrderList({
				type: this.ordertype != 5 ? this.ordertype : this.currentIndex == 1 ? '5' : '6',
				page: this.page,
				limit: this.limit,
				storeId: storage.getUserInfo().storeId
			}).then(res => {
				this.data = [...this.data, ...res.data.list]
			})
		},

		changeIndex(val) {
			this.currentIndex = val
			this.page == 1;
			this.data = []
			this.initData()
		},

		handleGoDetail(obj) {
			obj.ordertype = this.ordertype;
			if (this.ordertype == 5) {
				obj.orderstatus = this.currentIndex
			}
			uni.navigateTo({
				url: '/pages/business/orderDetail?orderDetail=' + encodeURIComponent(JSON.stringify(obj)),

			})
		}
	}
}
</script>

<style scoped>
.daifahuopage {
	width: 100%;
	min-height: 100vh;
	/* background: #F9F9F9; */
}

.top {
	width: 100%;
	height: 162rpx;
	position: relative;
	background: #28C749;
}

.topback {
	width: 16rpx;
	height: 29rpx;
	position: absolute;
	top: 87rpx;
	left: 32rpx;
}

.topname {
	width: 300rpx;
	height: 32rpx;
	text-align: center;
	font-family: Adobe Heiti Std;
	font-weight: normal;
	font-size: 33rpx;
	color: #FFFFFF;
	line-height: 32rpx;
	position: absolute;
	top: 88rpx;
	left: 50%;
	transform: translateX(-50%);
}

.orderlistitem {
	width: 100%;
	margin: 20rpx auto;
	padding: 24rpx 20rpx 28rpx;
	position: relative;
	background: #FFFFFF
}

.orderlistitem1 {
	width: 100%;
	height: 209rpx;
	position: relative;
}

.orderlistitem12 {
	width: 209rpx;
	height: 209rpx;
	position: absolute;
	top: 0;
	left: 0;

}

.orderlistitem2 {
	width: 389rpx;

	font-family: Microsoft YaHei;
	font-weight: 400;
	font-size: 24rpx;
	color: #000000;
	position: absolute;
	top: 0;
	left: 240rpx;

}

.orderlistitem3 {
	width: 389rpx;

	height: 55rpx;
	line-height: 55rpx;
	font-family: Microsoft YaHei;
	font-weight: 400;
	font-size: 25rpx;
	color: #999999;
	position: absolute;
	top: 118rpx;
	left: 240rpx;
}

.orderlistitem4 {
	width: 100rpx;
	height: 55rpx;
	line-height: 55rpx;
	text-align: right;
	font-family: Arial;
	font-weight: 400;
	font-size: 17rpx;
	color: #999999;
	position: absolute;
	top: 117rpx;
	right: 0;
}

.price {
	width: 100%;
	text-align: right;
	font-family: Arial;
	font-weight: 400;
	font-size: 21rpx;
	color: #000000;
}

.itemslast {
	width: 100%;
	height: 56rpx;
	margin-top: 30rpx;
	position: relative;
}

.laststatus {
	width: 400rpx;
	height: 100%;
	line-height: 56rpx;
	position: absolute;
	top: 0;
	left: 0;
	font-family: Microsoft YaHei;
	font-weight: 400;
	font-size: 28rpx;
	color: #F76E00;
}

.btn1 {
	width: 140rpx;
	height: 100%;
	border-radius: 30rpx;
	text-align: center;
	line-height: 56rpx;
	font-family: Microsoft YaHei;
	font-weight: 400;
	font-size: 24rpx;
	color: #666666;
	position: absolute;
	top: 0;
	right: 0;
	border: 1rpx solid #f3f3f3;
}

.listTabs {
	width: 100%;
	height: 80rpx;
	line-height: 80rpx;
	text-align: center;
	font-family: Source Han Sans CN;
	font-weight: 500;
	font-size: 36rpx;
	color: #3C3C3C;
	display: flex;
	justify-content: space-between;
	align-items: center;
	background: #FFFFFF;
}

.listTabs1 {
	width: 50%;
	height: 100%;

}

.underline {
	border-bottom: 4rpx solid rgb(146, 209, 40);
}
</style>
